<template>
	<view>
		<u-loading-page :loading="loadstatus"></u-loading-page>
		<view class="u-padding-20">
		<u-gap height="10" ></u-gap>
		
		<u-radio-group v-model="typeclass" @change="selectclass" width="100%">
			<view class="u-flex u-flex-around u-flex-fill">
			<u-radio :name="8" label="植物" class="u-flex-6"></u-radio>
			<u-radio :name="12" label="动物/昆虫" class="u-flex-6"></u-radio>
			</view>
		</u-radio-group>
		
		<view style="width: 200px;margin: auto;margin-top: 10px;">
				<u-upload 
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					maxCount="1"
					name="1"
					width="200"
					height="200"
					uploadText="识别中"
					:capture="['album', 'camera']">
					<image src="@/static/shitu.png" mode="widthFix" style="width: 200px;height:auto"></image>
				</u-upload>
		  </view>
		  <view class="u-m-b-20 text-center">
			<u--text text="选择植物照片或拍照，(推荐手机横向拍图,以便采纳)。" align="center" size="12" type="warning"></u--text>
			<!--u--text text="识别植物后查看详情，看完整广告有签到积分哦。" align="center" size="15" type="success"></u--text-->
		  </view>
		</view>
		<ad unit-id="adunit-daa66b67b5002657"></ad>

		
<view v-if="flow_list.length>0">
	<view class="u-padding-20">
    <view class="base-panel-box u-m-t-20">
      <view class="htitle">
        <view>识别结果</view>
      </view>
      <view class="item" v-for="(item, index) in flow_list" :key="index" @click="gopage(item)">
        <u-row gutter="0" justify="space-between">
          <u-col span="11">
            <view class="demo-layout bg-purple-light">
              <view class="u-flex u-flex-between u-m-b-20">
				  <view class="bittitle">{{ item.name }}</view>
				<view class=""></view>
			  </view>
			  <view>{{item.scoretxt}}</view>
              <text>{{ item.baike_info.description }}</text>
            </view>
          </u-col>
          <u-col span="1" textAlign="right">
            <u-icon name="arrow-right" color="#969799" size="14" v-if="item.isurl==true"></u-icon>
          </u-col>
        </u-row>
      </view>
    </view>
	</view>

</view>

<view v-if="history.all.length>0||history.my.length>0">
	<u-gap height="6" bg-color="#f3f4f6" ></u-gap>
	<u-gap height="4" ></u-gap>
	
<view class="u-padding-20">
	<view class="u-m-b-20 u-flex u-flex-between">
		<view class="bittitle">识别记录</view>
		<view class="right u-font-xs u-p-r-20">审核后的照片将被采用为动植物参考图</view>
	</view>
	
		<view class="fixed-4list">
				<ul>
				<view v-for='(item,index) in history.my'>
					<li>
						<u--image :src="item.cover" width="100%" height="80px" radius="6"
						@click="$Router.push({path: '/pages/componentsA/durg/archiveinfo', query: {aid: item.aid}})"></u--image>
						<view class="title u-m-b-10">{{item.name}}</view>
					</li>
				</view>
				<view v-for='(item,index) in history.all'>
					<li>
						<u--image :src="item.cover" width="100%" height="80px" radius="6"
						@click="$Router.push({path: '/pages/componentsA/durg/archiveinfo', query: {aid: item.aid}})"></u--image>
						<view class="title u-m-b-10">{{item.name}}</view>
					</li>
				</view>
				</ul><view class="clear"></view>
		</view>

</view>
</view>
	<view class="clear"></view>
	<u-gap height="160"></u-gap>
</view>
</template>


<script>
import {mapState,mapMutations} from 'vuex';
import base from "@/config/baseUrl";
export default {

	data(){
		return {
				flow_list:[],
				typeclass:8,
				page:1,
				loadstatus:false,
				loadStatus:'loadmore',
				fileuploadaction: base.baseUrl + "index/Tools/addguest",
				fileList1: [],
				list_img1:[],
				history:{
					all:'',
					my:''
				}
			};
	},
	computed: {
	  ...mapState(['user']),
	},
	 onLoad(options) {
		this.getflowlist();
	},
	onPullDownRefresh() {
		this.flow_list=[]
		this.fileList1=[]
		this.getflowlist();
		uni.stopPullDownRefresh();

	},
methods:{
	selectclass(e){
		console.log(e)
	},
    getflowlist() {
			return new Promise((resolve, reject) => {
					this.$api('dcd.history', {}).then(res => {
						
						if (res.code==200){
							this.history=res.data
						}
						console.log(this.history)
				}).catch((e)=>{
					resolve(false);
				});
			})
    },
		gopage(item){
			console.log("item..")
			if (item.isurl){
				this.$Router.push({
					path: "/pages/componentsA/durg/taginfo",
					query: {
						name:item.name,
						tagtypeid:'',
						playad:0
					}
				});
			}
		},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this[`list_img${event.name}`].splice(event.index, 1)
				this.flow_list=[]
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {

				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb,event.name)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				
			},
			uploadFilePromise(url,index) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.fileuploadaction, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							table: 'info',
							typeclass:this.typeclass
						},
						header: {
							'MemberToken': this.user.tokenInfo,
							'Bid':this.user.bid
							},
						success: (res) => {
							let upfile=JSON.parse(res.data);
							
								if (upfile.code==200){
									this.flow_list=upfile.data.result
								}else{
									this.$tools.msg(upfile.msg);
								}
								console.log(this.flow_list)
								resolve(res.data)
						}
					});
				})
			},
	
}
	
};
</script>
<style lang="scss" scoped>
	.u-icon{
		span{
			width: 50px;
			height: 50px;
			font-size: 50px;
		}

	}
	.bittitle{
		font-size: 16px;font-weight: bold;line-height: 110%;
	}
	.fixed-4list {
		ul{
			padding: 0px;margin: 0px;
			li{
				width: 23%;float: left;margin-right: 2%;
				.title{width: 100%;overflow: hidden;text-align: center;}
			}
			li:nth-child(4n){margin: 0px;width: 25%;}
		}
	}
</style>
